﻿@model DingTalkAgent.Web.Models.SysN_Page
@{
    ViewBag.Title = "list";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="/Skin/H4.2/favicon.ico">
    <link href="/Skin/H4.2/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/Skin/H4.2/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/Skin/H4.2/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <!-- jqgrid-->
    <link href="/Skin/H4.2/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="/Skin/H4.2/css/animate.css" rel="stylesheet">
    <link href="/Skin/H4.2/css/style.css?v=4.1.0" rel="stylesheet">
    <!-- 全局js -->
    <script src="/Skin/H4.2/js/jquery.min.js?v=2.1.4"></script>
    <script src="/Skin/H4.2/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- Peity -->
    <script src="/Skin/H4.2/js/plugins/peity/jquery.peity.min.js"></script>
    <!-- jqGrid -->
    <script src="/Skin/H4.2/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="/Skin/H4.2/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <!-- 自定义js -->
    <script src="/Skin/H4.2/js/content.js?v=1.0.0"></script>
    <!-- jsTree plugin javascript -->
    <script src="/Skin/H4.2/js/plugins/jsTree/jstree.min.js"></script>

    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_2 {
            top: 900px !important;
        }

        #pager_list_1_left {
            display: none;
        }
    </style>
</head>
<body class="gray-bg ">
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>机构列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="overflow:scroll">
                        <div id="tree_1"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>员工列表</h5>
                    </div>
                    <div id="q" class="ibox-content">
                        <form role="form" class="form-inline" id="form1" name="form1" style="width:50%;float:left">
                            @Html.Hidden("pid", null)
                            <div class="form-group">
                                    @*<label for="exampleInputEmail2" class="sr-only">关键字</label>*@
                                    <input type="email" placeholder="输入姓名/电话" id="query" name="query" class="form-control">
                            </div>
                            @*<button class="btn btn-primary" type="button" onclick="add()">添加</button>*@
                            <button class="btn btn-white" type="button" id="btnsearch">查询</button>
                        </form>
                        <input class="btn btn-primary" style="float:right;margin-right:17px" onclick="sysData()" id="btn" type="button" value="手动同步" />
                        <div style="clear:both"></div>
                    </div>
                    <div class="ibox-content">
                        <div class="jqGrid_wrapper">
                            <table id="table_list_1"></table>
                            <div id="pager_list_1"></div>
                        </div>
                        <p>&nbsp;</p>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
                $.fn.serializeObject = function () {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function () {
                        if (o[this.name]) {
                            if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                            }
                            o[this.name].push(this.value || '');
                        } else {
                            o[this.name] = this.value || '';
                        }
                    });
                    return o;
                };
                $(document).ready(function () {
                    $("#btnsearch").click(function () {
                        $("#table_list_1").jqGrid('setGridParam', {
                            postData: $('#form1').serializeObject(),
                            page: 1
                        }).trigger("reloadGrid"); //重新载入
                    });
                    var jsonuserinfo = $('#form1').serializeObject();
                    $.jgrid.defaults.styleUI = 'Bootstrap';
                    $("#table_list_1").jqGrid({
                        url: '/Employee/GetEmployeeList',
                        datatype: "json",
                        mtype: 'POST',
                        height: '500',
                        autowidth: true,
                        shrinkToFit: true,
                        multiselect: true,
                        multiboxonly: true,
                        toolbar: [true, "top"],
                        postData: $('#form1').serializeObject(),
                        cellEdit: true,
                        rowNum: 10,
                        rowList: [10, 20, 30],
                        colNames: ['工号', '姓名', '电话'],
                        colModel: [
                            {
                                name: 'jobnumber',
                                index: 'jobnumber',
                                width: '15%',
                            },
                            {
                                name: 'name',
                                index: 'name',
                                width: '15%',
                            },
                            {
                                name: 'mobile',
                                index: 'mobile',
                                width: '15%',
                            }
                        ],
                        pager: "#pager_list_1",
                        viewrecords: true,
                        // caption: "jqGrid 示例1",
                        hidegrid: false
                    });
                    $("#t_table_list_1").css({ "height": 70 });
                    $("#q").appendTo("#t_table_list_1");
                    $(window).bind('resize', function () {
                        var width = $('.jqGrid_wrapper').width();
                        $('#table_list_1').setGridWidth(width);
                        $('#table_list_2').setGridWidth(width);
                    });
                    getTree();
                });

                function getTree() {
                    $.ajaxSetup({ cache: false });//这个是为了树的准确性做的一个缓存区清理的工作
                    $("#tree_1").jstree({//从这里开始初始化JSTree
                        core: {
                            data: {
                                url: "/Employee/GetDepartmentList",
                                dataType: "json",
                                async: true,
                                data: function (node) {
                                    return { id: node.id };
                                }
                            },
                        },
                        types: {
                            default: {
                                "icon": "fa fa-file-code-o"
                            },
                            html: {
                                'icon': 'fa fa-file-text-o'
                            },
                        },
                        state: { "opened": true },
                        plugins: ["state", "types", "wholerow"]

                    }).bind('click.jstree', function (event) {
                        var eventNodeName = event.target.nodeName;
                        var eventNodeId = $(event.target).parents('li').attr('id');
                        $("#pid").val(eventNodeId);
                        $("#btnsearch").click();
                    })
                }
                function sysData() {
                    $.ajax({
                        type: "POST",
                        url: "/Employee/SysData",
                        success: function (data) {
                            $.messager.alert('提示信息', data.msg, "info");
                        }
                    });
                }
    </script>
    <div class="modal fade" id="mmXgmodal" tabindex="-1" role="dialog" aria-labelledby="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content  animated bounceInRight">

            </div>
        </div>
    </div>

</body>
</html>







@*<style type="text/css">
        .tree-folder {
            width: 0px;
        }

        .tree-file {
            width: 0px;
        }
    </style>
    <link href="~/dist/common.css?@DateTime.Now.Ticks" rel="stylesheet" />
    <div data-options="region:'center',border:false" class="divCenter" style="vertical-align: top;">
        <input id="hidid" type="hidden" value="0" />
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="220px" valign="top">
                    <div class="sort-header" style="width: 220px; display: block;">
                        <div class="sort-title" style="text-align:center">
                            机构列表
                        </div>
                        <div class="sort-right">
                        </div>
                    </div>
                    <div class="sort-content" style="width: 220px; display: block; ">
                        <div style="width: 220px; overflow-x: hide; overflow-y: auto; text-align: left;"
                             id="treeH">
                            <ul id="ModuleTree"></ul>
                        </div>
                    </div>
                </td>
                <td valign="top" style="padding-left: 10px; width: 90%;">
                    <table id="tg" ></table>
                    @*<div id="tbar" style="text-align: right">
                        <a href="javascript:void(0)" onclick="createData()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" style="display:@ViewBag.Create">
                            添加
                        </a> <a href="javascript:void(0)" onclick="updateData()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" style="display:@ViewBag.Edit">
                            编辑
                        </a> <a href="javascript:void(0)" onclick="deleteData()" class="easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true" style="display:@ViewBag.Delete">
                            删除
                        </a>
                    </div>*@
@*<div id="mm" class="easyui-menu" style="width: 120px;">
                        <div onclick="createData()" data-options="iconCls:'icon-add'" style="display:@ViewBag.Create">
                            添加权限
                        </div>
                        <div onclick="updateData()" data-options="iconCls:'icon-edit'" style="display:@ViewBag.Edit">
                            编辑权限
                        </div>
                        <div onclick="deleteData()" data-options="iconCls:'icon-cut'" style="display:@ViewBag.Delete">
                            删除权限
                        </div>
                        <div class="menu-sep">
                        </div>
                        <div onclick="reloadData()" data-options="iconCls:'icon-reload'">
                            刷新
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $(function () {
            $.ajaxSetup({
                cache: false
            });
            setSize();
            $(window).resize(function () {
                setTimeout(setSize, 500);
            });
            bindTree();
        });

        function setSize() {
            var h = $(window).height();
            var treeh = h - 50;
            var tgh = h - 70;
            $("#treeH").css({ "height": treeh });
            $("#tg").datagrid({ height: tgh });
        }

        function bindTree() {
            $("#ModuleTree").tree({
                url: '/Employee/GetDepartmentList',
                animate: true,
                onBeforeSelect: function (node) {
                    if (!$(this).tree('isLeaf', node.target)) {
                        return false;
                    }
                },
                onClick: setActionList
            });

            $('#tg').datagrid({
                title: '员工列表',
                url: '/Employee/GetEmployeeList?departmentId=1',
                animate: true,
                pagination: true,
                rownumbers: true,
                fitColumns: true,
                //idField: 'UserID',
                pageSize: 10,
                fit: true,
                toolbar: [{
                    text:'添加',
                    iconCls: 'icon-add',
                    handler: function(){
                        openDialog();
                    }
                },{
                    text:'编辑',
                    iconCls: 'icon-edit',
                    handler: function(){
                        edit();
                    }
                }, {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteData();
                    }
                },{
                    text:'同步员工数据',
                    iconCls: 'icon-edit',
                    handler: function(){
                        sysData();
                    }
                }],
                pageList: [10,20,50,100],
                view: myview,
                emptyMsg: '没有找到相关记录',
                columns: [[
                { field: 'jobnumber', title: '工号', width: 150, align: 'center' },
                { field: 'name', title: '姓名', width: 100, align: 'center' },
                { field: 'mobile', title: '手机', width: 150, align: 'center' }
                ]],
                onLoadSuccess: function () {
                    $('#tg').datagrid("clearSelections");
                },
                onSelect: function (rowIndex, rowData) {

                },
                onUnselect: function (rowIndex, rowData) {

                }
            });
        }


        function setActionList(node) {
            if (!$(this).tree('isLeaf', node.target)) {
                if (node.state == "open") {
                    $(this).tree("collapse", node.target);
                }
                else {
                    $(this).tree("expand", node.target);
                }
                return false;
            }
            $('#tg').datagrid('load', {
                departmentId: node.id
            });
        }

        //打开窗体
        function openDialog(id) {
            if (id) {
                addDialog({ url: "/Employee/Edit/" + id, title: '编辑', width: 410, height: 180 });
            }
            else {
                addDialog({ url: "/Employee/Add", title: '添加', width: 410, height: 180 });
            }
        }

        //修改
        function edit() {
            var selects = $("#tg").datagrid("getSelections");
            if (selects.length <= 0) {
                $.messager.alert('提示', '请选择要编辑的行', 'info');
                return false;
            }
            else {
                if (selects.length > 1) {
                    $.messager.alert('提示', '请选择一行数据', 'info');
                    return false;
                }
                var id = selects[0].userid;
                openDialog(id);
            }
        }

        function sysData() {
            $.ajax({
                type: "POST",
                url: "/Employee/SysData",
                success: function (msg) {
                    switch (msg) {
                        case "ok":
                            //$.messager.alert('提示', '删除成功', 'info');
                            reloadData();
                            break;
                        case "false":
                            $.messager.alert('提示', '失败', 'error');
                            break;
                        default:
                            $.messager.alert('提示', msg, 'info');
                            break;
                    }
                }
            });
        }

        //重新加载
        function reloadData() {
            $("#tg").datagrid("unselectAll");
            $('#tg').datagrid("reload");
        }

        //获取选中行ID
        function selectDatas() {
            var selects = $("#tg").datagrid("getSelections");
            if (selects.length <= 0) {
                $.messager.alert('提示', '请选择要删除的行', 'info');
                return 0;
            }
            else {
                var ids = [];
                for (var i = 0; i < selects.length; i++) {
                    ids.push(selects[i].ID)
                }
                return ids.join(",");
            }
        }
        //删除数据
        function deleteData() {
            var datas = selectDatas();
            if (datas) {
                $.messager.confirm('确认', '您确认想要删除吗？', function (r) {
                    if (r) {
                        $.ajax({
                            type: "POST",
                            url: "/Employee/Delete",
                            data: "id=" + datas,
                            success: function (msg) {
                                switch (msg) {
                                    case "ok":
                                        //$.messager.alert('提示', '删除成功', 'info');
                                        reloadData();
                                        break;
                                    case "false":
                                        $.messager.alert('提示', '删除失败', 'error');
                                        break;
                                    case "isSysFalse":
                                        $.messager.alert('提示', '同步钉钉失败！', 'error');
                                        break;
                                    default:
                                        $.messager.alert('提示', msg, 'info');
                                        break;
                                }
                            }
                        });
                    }
                });
            }
        }
        //datagrid返回记录为0时显示“没有找到相关记录”
        var myview = $.extend({}, $.fn.datagrid.defaults.view, {
            onAfterRender: function (target) {
                $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
                var opts = $(target).datagrid('options');
                var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
                vc.children('div.datagrid-empty').remove();
                if (!$(target).datagrid('getRows').length) {
                    var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || '没有找到相关记录').appendTo(vc);
                    d.css({
                        position: 'absolute',
                        left: 0,
                        top: 50,
                        width: '100%',
                        textAlign: 'center'
                    });
                }
            }
        });
        //当在弹出框里再弹出窗体时，通过传不同参数的id
        function addDialog(option, id) {
            var divId = id || "div_easyuiDialog";
            if (!option.url) return;
            var defaultPama = {
                width: 400, height: 210, iconCls: 'icon-save', closed: false, modal: true, autoCloseOnEsc: true,
                url: "", title: 'Add'
            }
            var pamaOption = $.extend(defaultPama, option);
            if (!document.getElementById(id)) {
                $("body").append('<div id="' + divId + '"/>');
            }
            $('#' + divId).dialog({
                iconCls: pamaOption.iconCls,
                title: pamaOption.title,
                width: pamaOption.width,
                height: pamaOption.height,
                closed: pamaOption.closed,
                cache: false,
                href: pamaOption.url,
                modal: pamaOption.modal,
                autoCloseOnEsc: pamaOption.autoCloseOnEsc
            });
        }
        function closeDialog(id) {
            var divId = id || "div_easyuiDialog";
            $("#" + divId).dialog("close");
        }
    </script>*@